import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽
Vue.directive("dialogDrag", (el) => {
	const header = el.querySelector(".el-dialog__header");
	const main = el.querySelector(".el-dialog");
	header.style.cursor = "move";
	header.onmousedown = (e) => {
		// 上次鼠标弹起时X轴的偏移量
		let l = +main.style.left.replace(/px/, "");
		// 上次鼠标弹起时Y轴的偏移量
		let t = +main.style.top.replace(/px/, "");
		let x = e.pageX - l;
		let y = e.pageY - t;
		let markL = 0,
			markT = 0,
			markR = 0,
			markB = 0,
			offset = 10; // 偏移量
		document.onmousemove = (e) => {
			// 处理右边界
			if (main.offsetLeft + main.offsetWidth + offset >= el.offsetWidth) {
				markR === 0 && (markR = e.pageX - x);
				e.pageX - x < markR && (main.style.left = e.pageX - x + "px");
			} else if (main.offsetLeft > offset) {
				main.style.left = e.pageX - x + "px";
			} else {
				// 处理左边界
				markL === 0 && (markL = e.pageX - x);
				e.pageX - x > markL && (main.style.left = e.pageX - x + "px");
			}
			// 处理下边界
			if (main.offsetTop + main.offsetHeight + offset >= el.offsetHeight) {
				markB === 0 && (markB = e.pageY - y);
				e.pageY - y < markB && (main.style.top = e.pageY - y + "px");
			} else if (main.offsetTop > offset) {
				main.style.top = e.pageY - y + "px";
			} else {
				// 处理上边界
				markT === 0 && (markT = e.pageY - y);
				e.pageY - y > markT && (main.style.top = e.pageY - y + "px");
			}
		};
		document.onmouseup = () => {
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};
});